<template>
  <div>
    <PageTools>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="人员搜索">
          <el-input
            v-model="formInline.userName"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item label="角色">
          <el-select
            v-model="formInline.isRepair"
            placeholder="请选择"
            style="width: 80%"
            clearable
          >
            <el-option
              v-for="(item,index) in roleList"
              :key="index"
              :label="item.name"
              :value="item.isRepair"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="Search"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </PageTools>
    <el-card class="main">
      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="list"
        style="width: 100%"
        :header-cell-style="{
          fontWeight: 'normal',
          background: '#f3f6fb',
        }"
      >
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column label="人员名称" prop="userName" />
        <el-table-column label="角色" prop="roleName" />
        <el-table-column label="联系电话" prop="mobile" />
        <el-table-column
          label="完成工单(本月)"
          prop="workCount"
        />
        <el-table-column
          label="进行中工单"
          prop="progressTotal"
        />
        <el-table-column label="拒绝工单(本月)" prop="userName" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="small"
              @click="detailsFn(row)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row v-if="totalPage!==1" type="flex" justify="space-between" align="middle">
        <el-col :span="19">
          <p class="paginationHeader">
            {{
              `共${totalCount}条记录 第${page.pageIndex}/${totalPage}页`
            }}
          </p>
        </el-col>
        <el-col :span="5">
          <el-pagination
            background
            :current-page="page.pageIndex"
            :page-size="page.pageSize"
            :total="totalCount"
            layout="prev, next"
            prev-text="上一页"
            next-text="下一页"
            @current-change="changePage"
          />
        </el-col>
      </el-row>
    </el-card>
    <!-- 新增设备 -->
    <UserWork :dialog-work="dialogWork" :user-obj="userObj" @close="close" />
  </div>
</template>

<script>
import UserWork from './components/userWork.vue'
import { searchUserWorkList } from '@/api/userIndex'
export default {
  components: {
    UserWork
  },
  data() {
    return {
      roleList: [
        { name: '运营员', isRepair: false },
        { name: '维系员', isRepair: true }
      ],
      formInline: { userName: '', isRepair: '' },
      loading: false,
      list: [],
      page: {
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: 0,
      totalPage: 0,
      dialogWork: false,
      userObj: {}
    }
  },
  created() {
    this.searchUserWorkList()
  },
  methods: {
    async  searchUserWorkList(formInline) {
      this.loading = true
      const { data } = await searchUserWorkList({ ...this.page, ...formInline })
      this.loading = false
      this.list = data.currentPageRecords
      this.totalCount = Number(data.totalCount)
      this.totalPage = Number(data.totalPage)
    },
    // 1.查询
    Search() {
      this.searchUserWorkList(this.formInline)
    },
    // 3.分页
    changePage(val) {
      this.page.pageIndex = val
      this.searchUserWorkList()
    },
    // 4.查看详情
    detailsFn(row) {
      this.userObj = row
      this.dialogWork = true
    },
    close() {
      this.dialogWork = false
    }
  }
}
</script>

<style lang="scss">
 @import "~@/styles/mainTop.scss";
 @import "~@/styles/mainAdd.scss";
 @import "~@/styles/mainTable.scss";
</style>
